<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页架构</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="css/common.css">
    <script src="script/vue.min.js" type="text/javascript"></script>
    <script src="script/frame.js" type="text/javascript"></script>
    <script src="script/baseConfig.js" type="text/javascript"></script>
    <script src="script/utils.js" type="text/javascript"></script>
    <script src="script/common.js" type="text/javascript"></script>
    <style>
      #footer{ 
          position:fixed;
          bottom:0;
          left:0;
          width:100%;
          z-index: 1000;
		  background:#FFF;
      }
      #footer:after{
          content: ' ';
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          transform: scale(.5);
          transform-origin: 0 0;
          pointer-events: none;
          box-sizing: border-box;
          border: 0 solid #F6F6F6;
          border-top-width: 1px;
          right: 0;
      }
      .indexFooter{
          height:1rem;
          padding:0 0.12rem;
          overflow:hidden;
      }
	  .indexFooter.iosTest .items{
		  width:calc(100% / 3);
	  }
      .items{
          float:left;
          width:calc(100% / 5);
          color:#2F2F2F;
          text-align:center;
          padding:0.17rem 0;
          font-size:0.22rem;
          position:relative;
      }
      .items.hover{
          color:#ff3126;
      }
      .items.push{
          padding:0;
      }
      .items.push img{
          height: 0.77rem;
          width: 0.77rem;
          /* box-shadow: 0px 0px 5px #ff3c26; */
          border-radius: 50%;
          margin-top: 0.14rem;
      }
      .items img{
          height: 0.4rem;
          display: block;
          margin: 0px auto;
          margin-bottom: .09rem;
		  transition: 0.5s all;
      }
	  .items i{
		position:absolute;
		left:66%;
		top:0.1rem;
		transform: translate(-50%,0);
		width:0.11rem;
		height:0.11rem;
		background:#F30;
		border-radius:50%;
		z-index:1;
	  }


      #header{
          background:#FFF;
      }
      .indexHead{
          padding:0 0.3rem;
          height:1rem;
          overflow:hidden;
      }
      .indexHead .h3{
          font-size:0.36rem;
          font-weight:bolder;
          line-height:1rem;
          max-width:1.8rem;
          display: block;
          overflow:hidden;
      }
      .indexHead .headRight{
          padding-left:0.4rem;
          display: flex;
          align-items: center;
      }
      .indexHead .indexSearch{
          border-radius:20rem;
          background:#F0F5FB;
          height:0.65rem;
          line-height:0.65rem;
          text-align:center;
          font-size:0.29rem;
          color:#b5b5b5;
          width:100%;
      }
      .indexHead .indexSearch img{
          width:0.33rem;
          vertical-align: middle;
          margin-top:-0.06rem;
          margin-right:0.2rem;
      }
      .indexHead .headIcon{
          width:0.44rem;
          height:0.44rem;
      }
      .filterBtn{
          width: 0.8rem;
          display: flex;
          justify-content: flex-end;
          align-items: center;
      }
      .commonStatusTitle{
          border-bottom:1px solid #F9F9F9;
      }
	  .pushActive{
		  transform: rotate(45deg);
	  }
	  .pushTitle{
		  height:1rem;
		  font-size:0.35rem;
		  font-weight:bold;
		  text-align:center;
		  line-height:1rem;
		  color:#000;
	  }

	  .spinner6 {
	      width: 0.6rem;
	      height: 0.2rem;
	      text-align: center;
		  margin:0px auto;
		  margin-top:0.29rem;
	  }
	  .spinner6>div {
	      background-color: #ff3126;
	      height: 100%;
	      width: 0.06rem;
	      margin-left: 0.04rem;
	      display: inline-block;
	      -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	      animation: stretchdelay 1.2s infinite ease-in-out;
	  }
	  .spinner6 .rect2 {
	      -webkit-animation-delay: -1.1s;
	      animation-delay: -1.1s;
	  }
	  .spinner6 .rect3 {
	      -webkit-animation-delay: -1s;
	      animation-delay: -1s;
	  }
	  .spinner6 .rect4 {
	      -webkit-animation-delay: -.9s;
	      animation-delay: -.9s;
	  }
	  .spinner6 .rect5 {
	      -webkit-animation-delay: -.8s;
	      animation-delay: -.8s;
	  }
	  @-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,40%,100%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.spinner7{width:90px;height:30px;text-align:center}.spinner7>div{background-color:#fff;height:15px;width:15px;margin-left:3px;border-radius:50%;display:inline-block;-webkit-animation:stretchdelay .7s infinite ease-in-out;animation:stretchdelay .7s infinite ease-in-out}.spinner7 .circ2{-webkit-animation-delay:-.6s;animation-delay:-.6s}.spinner7 .circ3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.spinner7 .circ4{-webkit-animation-delay:-.4s;animation-delay:-.4s}.spinner7 .circ5{-webkit-animation-delay:-.3s;animation-delay:-.3s}@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:translateY(-10px)}20%{-webkit-transform:translateY(-20px)}}@keyframes stretchdelay{0%,40%,100%{transform:translateY(-10px);-webkit-transform:translateY(-10px)}20%{transform:translateY(-20px);-webkit-transform:translateY(-20px)}}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="header">
		   <template v-if="navIndex==0">
			   <div class="indexHead disbox">
				   <div class="h3">蜂窝帮</div>
				   <div class="disflex headRight">
					   <div class="indexSearch" @click="$.openUrl('index/search','index/search',{animation:{type:'fade',subType:'from_top',duration:200}});"><img src="image/icons/search.png" />搜索</div>
					    <div class="filterBtn" @click="$.openUrl('common/filter','common/filter',{animation:{type:'movein',subType:'from_bottom'}})"><img src="image/home/filter.png" class="headIcon" /></div>
				   </div>
			   </div>
		   </template>
		   <template v-if="navIndex==1">
			   <div class="commonStatusTitle">
				   <h3 class="tableTitle clearfix">
					   <a :class="{'hover' : taskLink.type == 0}"
						   @click="changeTaskType(0)"
					   >
						   接单
					   </a>
					   <a :class="{'hover' : taskLink.type == 1}"
						   @click="changeTaskType(1)"
					   >
						   派单
					   </a>
				   </h3>
				   <div class="status">
					   <a
						   v-for="( stautsItem,statusIndex ) of taskStatusList"
						   :class="{'hover' : taskLink.status == stautsItem.status}"
						   :key="stautsItem.title + statusIndex"
						   @click="changTaskStatus(stautsItem.status)"
					   >
						   {{stautsItem.title}}
						   <font>
							   {{
								   taskLink.status == stautsItem.status ?
								   taskLink.nums : ''
							   }}
						   </font>
					   </a>
				   </div>
			   </div>
		   </template>
        </div>
        <footer id="footer">
            <div class="indexFooter clearfix" :class="iosTest?'iosTest':''">
                <a class="items" :class="navIndex==0?'hover':''" @click="toNav(0)">
					<div v-if="isFetching && navIndex == 0" class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>
                    <img v-else :src="'image/navigateIcon/nav0' + (navIndex==0?'_hover':'') +'.png'" />
					大厅
                </a>
                <a class="items" :class="navIndex==1?'hover':''" @click="toNav(1)">
                    <img :src="'image/navigateIcon/nav1' + (navIndex==1?'_hover':'') +'.png'" />
                    任务
                </a>
                <a class="items push" v-if="iosTest == false" @click="$.openUrl('common/commonTitle','push/index',{title:'发布任务'})">
                    <img src="image/navigateIcon/push.png" />
                </a>
                <a class="items" :class="navIndex==2?'hover':''" @click="toNav(2)" v-if="iosTest == false">
                    <img :src="'image/navigateIcon/nav2' + (navIndex==2?'_hover':'') +'.png'" />积分
                </a>
                <a class="items" :class="navIndex==3?'hover':''" @click="toNav(3)">
                    <img :src="'image/navigateIcon/nav3' + (navIndex==3?'_hover':'') +'.png'" />
                    我的<i v-if="showPop"></i>
                </a>
            </div>
        </footer>
    </div>
    <script type="text/javascript">
        apiready = function() {
			
            var launchTime = new Date().getTime();

            //设置沉浸式
            api.setStatusBarStyle({
                style: 'dark',
                color:"transparent"
            });
			
			//检查系统版本
			var systemVersion = parseInt(api.systemVersion.split(".")[0]);
			if(systemVersion && systemVersion<6){
				api.openFrame({
					name: "dog",
					useWKWebView:true,
					url: 'widget://html/content/common/appVersionLow.html',
					bgColor: 'rgba(0,0,0,0)',
					animation:{
						type:"fade"
					},
				}); 
				api.removeLaunchView({
					animation: {
						type: 'fade',
						duration: 800
					}
				});
				console.log("版本低于6.0");
				return;
			}
			
            //检查网络
            if(api.connectionType=="none"){
                $.showNoNetWork();
                api.removeLaunchView({
                    animation: {
                        type: 'fade',
                        duration: 800
                    }
                });
                return;
            }

			//检查更新
			if(CONFIG.env=='prod'){
				$.checkUpdate();
			} 

			//检查是否为模拟器
			$.isSimulator();


            var app = new Vue({
                el:'#app',
                data:{
                    navIndex:-1,
                    navList:['index','task','integral','my'],
                    rect: $.rect(),
                    taskStatusList: CONFIG.acceptStatus,
                    // 任务信息
                    taskLink: {
                        // 属性
                        type: 0,
                        // 状态
                        status: '',
                        nums: 0,
                    },

                    showPop: false,
                    timer: 0,
                    isFetching: false,

					iosTest:false,
					nav0ClickTime:0,
                },
                methods:{
                    hiddenAllPage:function(){
                        var that = this;
                        for(var i in that.navList){
                            api.setFrameAttr({
                                name: that.navList[i],
                                hidden:true
                            });
                        }
                    },
                    checkMyMsg: function(){
                        if(!$.isLogin()){
                            return false;
                        }
                        var _this = this;
                        $.ajax({
                            url: '/user/summary?get_report=1',
                            method: 'get',
							servceLayer:false,
                            success: function(res){
                                var hasMsg = res.data.have_msg;
                                var needReport = res.data.need_report;
                                if(hasMsg || needReport){
                                    _this.showPop = true;
                                }else{
                                    _this.showPop = false;
                                }
                                api.sendEvent({
                                    name: 'myMsgAndReport',
                                    extra: {
                                        hasMsg: hasMsg,
                                        needReport: needReport
                                    }
                                });
                            },
							error:function(){

							}
                        });
                        this.timer = setTimeout(function(){
                            _this.checkMyMsg();
                        }, 15000);
                    },
                    toNav:function(index){
                        var that = this;
						if(that.navIndex==index){
							if(index==0){
								that.isFetching = true;
								that.nav0ClickTime = new Date().getTime();
								api.sendEvent({
								    name: 'updatePageByTabNav',
								    extra: {
								        navIndex: that.navIndex
								    }
								});
								return;
							}else{
								return;
							}
						}

                        //显示对应导航栏目的页面
                        that.hiddenAllPage();
                        api.setFrameAttr({
                            name: that.navList[index],
                            hidden:false,
                        });
                        //让头部header变化
                        that.navIndex = index;

                        //让对应页面请求网络
                        api.sendEvent({
                            name: 'navGetData',
                            extra: {
                                navIndex:that.navIndex,
								type:that.navIndex==1 && this.taskLink.type,
								status:that.navIndex==1 && this.taskLink.status
                            }
                        });
                    },
                    changeTaskType:function(type) {//切换接单还是派单
                        if (this.taskLink.type == type) {
                            return;
                        }
						if(!$.isLogin()){
							$.toast("请先登录！");
							return;
						}
                        this.taskLink.type = type;
                        this.taskLink.status = '';
                        if (type == 1) {
                            this.taskStatusList = CONFIG.sendStatus;
                        }
                        if (type == 0) {
                            this.taskStatusList = CONFIG.acceptStatus;
                        }
						api.sendEvent({
						    name: 'navGetData',
						    extra: {type:this.taskLink.type,status:'',navIndex:1,mustGet:true}
						});
                    },
                    changTaskStatus:function(status) {//切换任务状态
                        if (this.taskLink.status == status) {
                            return;
                        }
						if(!$.isLogin()){
							$.toast("请先登录！");
							return;
						}
                        this.taskLink.status = status;
						api.sendEvent({
						    name: 'navGetData',
						    extra: {type:this.taskLink.type,status:status,navIndex:1,mustGet:true}
						});
                    }
                },
                mounted:function(){
                    $.initJs(this);

                    var that = this;
                    //初始化导航栏几个页面
					var dWidth = document.documentElement.clientWidth;
					var px = dWidth * 100 / 750;
                    for(var i in that.navList){
                        var rect = {marginTop:0,marginBottom:(px + api.safeArea.bottom)}
                        if(i==0 || i==4){//大厅页，顶部应为1rem
                            rect.marginTop = (1 * px) + api.safeArea.top;
                        }else if(i==1){
                            rect.marginTop = (2.1 * px) + api.safeArea.top;
                        }else{
                            rect.marginTop = api.safeArea.top;
                        }
                        api.openFrame({
                            name: that.navList[i],
                            url: 'html/content/'+that.navList[i]+'/index.html',
                            vScrollBarEnabled:false,
                            hScrollBarEnabled:false,
                            rect: rect,
						    useWKWebView:true,
                            pageParam:rect,
                            bgColor:i==0?'#FFFFFF':i==1?'#F9F9F9':i==2?'#FFFFFF':i==3?'#F9F9F9':'rgba(0,0,0,0)'
                        });
                    }
                }
            });






            // 更新任务数量
            api.addEventListener({name: 'taskNums'}, function(ret, err){
                app.taskLink.nums = ret.value.nums;
            });
			api.addEventListener({name: 'loginExit'}, function(ret, err){
			    app.taskLink.nums = 0;
			});


            // 回到首页并跳转到x导航栏去
            api.addEventListener({name: 'backIndex'}, function(ret, err){
                if(!ret){
                    return false;
                }
                var index = ret.value.navIndex;
                app.toNav(index);
                api.closeToWin({name: "root"});
            });

            //监听导航4个页面全部加载完成.
			var count = 0;
			api.addEventListener({name: 'navInitSuccess'}, function(ret, err){
				count++;
				if(count==4){
					app.toNav(0);
					app.checkMyMsg();
					setTimeout(function(){
                        api.removeLaunchView({
    					    animation: {
    					        type: 'fade',
    					        duration: 800
    					    }
    					});
                    },700);
				}
            });

            api.addEventListener({
                name: 'updatedByTabNav'
            }, function(ret, err){
                if(!ret){
                    return false;
                }
				var time = (new Date().getTime()) - app.nav0ClickTime;
				if(time<=600){
					setTimeout(function(){
						app.isFetching = false;
					},600 - time);
				}else{
					app.isFetching = false;
				}
            });
 



            //$.openUrl('task/index');
            //$.openUrl('common/filter','common/filter',{animation:{type:'movein',subType:'from_bottom'}});
            //$.openUrl('index/search','index/search',{animation:{type:'fade',subType:'from_top'}});
            //$.openUrl('common/commonUser','common/login');
            // $.openUrl('common/commonUser','common/reg');
            //$.openUrl('common/commonUser','common/findPass');
            //$.openUrl('common/commonUser','common/bindMobile');
            //$.openUrl('invite/index','invite/index');
            //$.openUrl('common/commonTitle','my/everyDay',{title:'每日奖励'});
            //$.openUrl('common/commonTitle','my/template',{title:'任务模板'});
            //$.openUrl('common/commonTitle','my/service',{title:'联系客服'});
            //$.openUrl('my/arbitration','my/arbitration');
			//$.openUrl('my/arbitration','my/newArbitration');  
            //$.openUrl('common/commonTitle','my/arbitrationApply',{title:'上传复审'});
            //$.openUrl('common/commonTitle','my/arbitrationDetail',{title:'仲裁详情', id: 1405});
			//$.openUrl('my/newArbitrationDetail','my/newArbitrationDetail',{title:'仲裁详情'});
			//$.openUrl('common/commonTitle','my/newArbitrationInfo',{title:'仲裁信息',id:1405});
            //$.openUrl('common/commonTitle','my/set',{title:'设置'});
            //$.openUrl('common/commonUser','common/changPass');
            //$.openUrl('common/changeNick','common/changeNick',{title:'修改昵称'});
            //$.openUrl('common/commonUser','common/changeMobile');
            //$.openUrl('common/changeHead','common/changeHead');
            //$.openUrl('common/commonTitle','common/changeAlipay',{title:'支付宝绑定'});
            //$.openUrl('common/commonTitle','my/wallet',{title:'我的钱包'});
            //$.openUrl('common/commonTitle','my/walletDetail',{title:'资金明细'});
            //$.openUrl('common/commonTitle','my/wallet_cash',{title:'提现'});
            //$.openUrl('common/commonTitle','my/wallet_recharge',{title:'充值'});
            // $.openUrl('common/commonTitle','push/index',{
            //     title: '发布任务',
            //     tpid: 20,
            //     name: '其它',
            //     titles: '更多',
            //     minAmount: 2000,
            //     minNum: 1
            // });
            // $.openUrl('common/commonTitle','push/definite',{
            //     title: '发布任务',
            //     tpid: 20,
            //     titles: 'app自定义模式',
            //     mode: 'major',
            //     price: 0.5,
            //     num: 2,
            //     typeTitle: '更多',
            //     typeName: '其它'
            // });
            //$.openUrl('','push/pushSubject',{title: '发布任务'});
            //$.openUrl('common/commonTitle','task/sendDetail',{title:'派单详情',taskId: 42});
            //$.openUrl('common/commonTitle','task/detail',{title:'任务详情',taskId: 42,acceptId: 658});
            //$.openUrl('common/commonTitle','my/mail',{title:'站内信'});
            //$.openUrl('common/commonTitle','my/mailDetail',{title:'站内信'});
			//$.openUrl('common/commonTitle','push/newPush',{title:'新版发布任务'});
			//$.openUrl('common/commonTitle','my/grade',{title:'等级勋章'});
        }
    </script>
</body>
</html>
